<template>
    <div class="order">
        <h1>{{title}}</h1>
        <button @click="handle">点击</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title:'zhnblwjfs',
        }
    },
    methods: {
        handle(){
            this.title = 'gjqwhnhh'
        }  
    },

    //1 vue3新选项式api生命周期函数 
    beforeCreate() {
        console.log('组件实例化前');
    },
    created() {
        console.log('组件实例化完成');
    },
    beforeMount() {
        console.log('组件挂载前');
    },
    mounted() {
        //3 在这里发ajax请求，创建定时器，事件监听
        console.log('组件挂载完成');
    },
    beforeUpdate() { 
        console.log('组件更新前');
    },
    updated() {
        console.log('组件更新完成');
    },
    //2 卸载期的两个更名了
    beforeUnmount() {
        //3 在这里取消请求，销毁定时器，取消监听 
        console.log('组件卸载前');
    },
    unmounted() {
        console.log('组件卸载完成');
    }

}
</script>

<style>

</style>